<template>
	<Row 
		:gutter="row.gutter" 
		:type="row.type"
		:align="row.align"
		:justify="row.justify"
		:class-name="row.className"
		:wrap="row.wrap"
		:style="row.style">
		<template v-if="cols" v-for="col in row.cols">
			<PortalCol :col='col'>
				<template v-if="col.rows && col.rows.length" v-for="child in col.rows">
					<portal-row :row="child"></portal-row>
				</template>
			</PortalCol>
		</template>
	</Row>
</template>
<script type="text/javascript">
import { Row } from 'view-design';
import PortalCol from './portal-col.vue';

export default {
	name: "PortalRow",
	props: {
		row: {
			type: Object,
			default() {
				return {};
			}	
		}
	},
	computed: {
		cols() {
			return this.row.cols && this.row.cols.length;
		}
	},
	components: {
		Row,
		PortalCol
	}
}
</script>